<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 16px;
        }
        span{
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        input{
            display: inline-block;
            width: 300px;
            height: 20px;
            /* margin-left: 30px; */
            margin-bottom: 10px;
            margin-left: 10px;
        }
        #introduce{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

    </style>
</head>
<body>
    <div>
        <span>姓名：</span><input type="text" id="name1"><br>
        <span>学号：</span><input type="text" id="xueHao1"><br>
        <span>身份证：</span><input type="text" id="idCrad1"><br>
        <span>年龄：</span><input type="text" id="age1"><br>
        <span>性别：</span><input type="text" id="gender1"><br>
        <span>专业：</span><input type="text" id="major1">
        <button id="btn">
            生成
        </button>
        <br>    
        自我介绍:
        <div id="introduce"></div>
    </div>
    <script>
        // 3. 创建一个对象，该对象存储一个学生的信息，该对象包含学号、身份证、年龄、性别、所学专业等属性信息，同时该对象包含一个自我介绍的方法，用来输出该对象的所有信息
        // ```javascript
        //     //对象中也可以写函数，对象中的函数就诚称之为对象的方法
        //     var obj = {
        //         fun:function(){
        //         //这就是对象的一个方法
        //         };
        //     }
        //     //调用的对象中的方法
        //     obj.fun();
        // ```

            var obj = {}
            function fun(){
                //添加点击事件
                btn.onclick = function(){
                    obj.name = name1.value
                    obj.xueHao = xueHao1.value
                    obj.idCrad = idCrad1.value
                    obj.age = age1.value
                    obj.gender = gender1.value
                    obj.major = major1.value
                    introduce.innerHTML = '大家好我是' + name1.value + '，今年' + age1.value + '岁，性别' + gender1.value + ',学号是' + xueHao1.value + ',身份证号是' + idCrad1.value + '，专业是' + major1.value + '，很高兴认识大家。'
                }
            }
            fun(obj)
            
            
    </script>
</body>
</html>